/* components/input/input.wxss */
.form_item {
  display: flex;
  align-items: center;
  min-height: 96rpx;
  margin-top: 20rpx;
  // padding: 0 20rpx;
  padding-left: 20rpx;
  border: 2rpx solid #fff;
  background: #fff;

  &.err {
    border-color: #f56c6c;
  }
  &.dis {
    // background: #f2f3f5;
    >.label {
      color: rgb(180, 180, 180);
    }
  }

  //240120 yan 增加纵向显示字段
  &.vertical{
    flex-direction: column;
    align-items: flex-start;
    > .label{
      width: 100%;
      padding: 20rpx 0;
      box-sizing: border-box;
      margin: 0;
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      align-items: center;

      >.icon_plus {
        justify-content: flex-end;
        width: 60rpx;
        height: 100%;
        padding-right: 20rpx;
        font-size: 40rpx;
        color: #4F4F4F;
      }
    }
    >.ipt_wrap{
      width: 100%;
      padding-bottom: 20rpx;
      box-sizing: border-box;
      justify-content: flex-start;
      >.ipt {
        text-align: left;
      }
    }
  }

  >.label {
    width: 6em;
    min-width: 6em;
    min-height: 38rpx;
    margin-right: 1em;

    &.required {
      position: relative;

      &::before {
        content: '*';
        position: absolute;
        transform: translateX(-100%);
        color: red;
      }
    }
  }

  >.ipt_wrap {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    overflow-x: hidden;

    >.ipt {
      flex: 1;
      text-align: right;
    }

    >.icon {
      // min-width: fit-content;
      display: flex;
      align-items: center;
      height: 100%;
      padding-right: 20rpx;

      &.hide {
        display: none;
      }
    }


    >.icon_plus {
      justify-content: flex-end;
      width: 60rpx;
      height: 100%;
      padding-right: 20rpx;
      font-size: 40rpx;
      color: #4F4F4F;
    }

    >.checkbox, >.file_wrap {
      // flex: 1;
      height: 100%;
      overflow-x: auto;

      >.scroll {
        display: flex;
        align-items: center;
        height: 100%;

        >.check {
          display: flex;
          align-items: center;
          margin-left: 16rpx;
          // padding: 8rpx 10rpx;
          padding-left: 16rpx;
          border-radius: 6rpx;
          font-size: 26rpx;
          white-space: nowrap;
          color: #2d6ff7;
          background: #eff3ff;

          &:first-child {
            margin-left: 0;
          }

          >.icon {
            width: 56rpx;
            height: 56rpx;
            font-size: 28rpx;
          }
        }

        >.plc {
          color: gray;

          &.hide {
            display: none;
          }
        }

        >.img_wrap {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          // width: 72rpx;
          // min-width: 72rpx;
          // height: 72rpx;
          width: 96rpx;
          height: 100%;
          // margin-left: 16rpx;

          // &:first-child {
          //   margin-left: 0;
          // }

          >.img {
            width: 64rpx;
            height: 64rpx;
          }

          >.icon {
            position: absolute;
            top: 0;
            left: 100%;
            transform: translate(-100%, 0%);
            font-size: 36rpx;
            color: gray;
            opacity: 0.8;
          }
        }

        >.file {
          display: flex;
          align-items: center;
          width: fit-content;
          min-width: fit-content;
          height: 56rpx;
          margin-right: 16rpx;
          border: 2rpx solid #CCCCCC;
          border-radius: 6rpx;
          font-size: 26rpx;

          &:last-child {
            margin-right: 0;
          }

          >.icon-file {
            font-size: 44rpx;
            color: #ffe36c;
          }

          >.icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48rpx;
            height: 100%;
            font-size: 32rpx;
            // color: #ccc;

          }
        }
      }
    }

    >.file_wrap {
      >.scroll {
        width: fit-content;
      }
    }
  }

  >.textarea {
    width: 100%;
  }
}

.form_textarea {
  margin-top: 20rpx;
  padding: 30rpx 20rpx;
  border: 2rpx solid #fff;
  background: #fff;

  &.err {
    border-color: #f56c6c;
  }
  &.dis {
    // background: #f2f3f5;
    >.label {
      color: rgb(180, 180, 180);
    }
  }

  >.label {
    margin-bottom: 20rpx;

    &.required {
      position: relative;

      &::before {
        content: '*';
        position: absolute;
        transform: translateX(-100%);
        color: red;
      }
    }
  }

  >.textarea {
    width: 100%;
    height: 132rpx;
    line-height: 44rpx;
  }
}



.img_popup {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0) !important;

  >.popup_wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    // max-height: 100%;
    height: 100%;
    // overflow: hidden;
    // background: rgb(255, 255, 255);

    >.img {
      width: 100%;
      height: 100%;
      // background: #fff;
    }

    >.icon {
      position: absolute;
      // left: 0;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      font-size: 80rpx;
      color: #fff;
      background: rgba(0, 0, 0, 0.4);

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }
    }

    >.close {
      position: absolute;
      top: 12rpx;
      right: 12rpx;
      font-size: 48rpx;
      color: rgba(255, 255, 255, 0.85);
    }

    // >.bottom {
    //   position: absolute;
    //   left: 0;
    //   bottom: 0;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   width: 100%;
    //   height: 64rpx;
    //   padding-bottom: 24rpx;
    //   color: #fff;
    //   // background: rgba(0, 0, 0, 0.4);
    // }
    >.bottom {
      position: absolute;
      left: 50%;
      bottom: 36rpx;
      transform: translateX(-50%);
      padding: 10rpx 24rpx;
      border-radius: 56rpx;
      font-size: 26rpx;
      color: #fff;
      background: rgba(0, 0, 0, 0.4);
    }


    .btns-wrap{
      background: #fff;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 50rpx 30rpx 30rpx;
      box-sizing: border-box;
      > .btn{
        width: 100%;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 38rpx;
        &.cancel{
          border-top: 2rpx solid #e6e6e6;
          font-size: 34rpx;
        }
      }
      > .close{
        position: absolute;
        top: 12rpx;
        right: 12rpx;
        font-size: 48rpx;
        color: #999999;
      }
    }
  }
}
